<template>
  <div
    :class="[
      search_type_border,
      css_child_margin_top,
      css_content_padding,
      css_wind_light_hover,
    ]"
    :id="search_type_border"
  >
    <div
      :class="[title_search_type, css_title_world_gray]"
      :id="title_search_type"
    >
      {{ placeholder_search_type }}
    </div>

    <div :class="[search_type_inp_border]">
      <input
        type="text"
        :class="[search_type_inp, css_inp_empty_style, css_font_size_20]"
        :id="search_type_inp"
      />
    </div>
    <cross_line width="100%"></cross_line>
    <div
      :class="[search_result_border, css_wind_light_hover, css_content_padding]"
      :id="search_result_border"
    >
      <uni_type
        v-for="cur_uni_type in ref_selectable_type_info"
        :key="cur_uni_type.id"
        :id="cur_uni_type.id"
        :val="cur_uni_type.val"
        :active="cur_uni_type.active"
        :cur_uni_type_id="get_full_id_search_uni_type(cur_uni_type.id)"
      ></uni_type>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

import cross_line from '../../../../../global_comps/uni_comps/cross_line/cross_line.vue';

import uni_type from '../uni_type/uni_type.vue';

import './search_type.css';
import { init_search_type } from './search_type';
import {
  css_child_margin_top,
  css_content_padding,
  css_font_size_20,
  css_inp_empty_style,
  css_title_world_gray,
  css_wind_light_hover,
} from '../../../../../global_comps/Css';
import {
  placeholder_search_type,
  search_result_border,
  search_type_border,
  search_type_inp,
  search_type_inp_border,
  title_search_type,
} from './DataDefine/sourceData';
import { get_full_id_search_uni_type } from './Func/get_full_id_search_uni_type';
import { ref_selectable_type_info } from './Func/ref_selectable_type_info';

let cur_search_type_props = defineProps({});

onMounted(() => {
  init_search_type();
});
</script>
